<template>
	<view>
		<!-- 订单状态和操作start -->
		<view class="orderStatus">
			<view class="timeOut">
				<view class="time">
					<text class="realTime">12:24</text>
					<br />
					<text class="overTime">结束时间</text>
				</view>
			</view>
			<view class="title">
				订单已完成
			</view>
			<view class="oneMoreTime">感谢您的信任，期待再次光临</view>
			<view class="ops">
				<button type="primary" class="btn">收藏店家</button>
				<button type="primary" class="btn">评价得积分</button>
			</view>
		</view>
		<!-- 订单状态和操作end -->

		<!-- 菜的信息和费用start -->
		<view class="foodInfoAndCost">
			<view class="title">夹克厨房</view>
			<view class="foodInfo" v-for="(item,index) in list">
				<text class="name">{{item}}</text>
				<text class="count">x{{index+1}}</text>
				<text class="money">￥{{index+1}}</text>
			</view>

			<view class="cost">
				<view class="onlinePayDiscounts">
					<text>
						<text class="circle">减</text>
						<text class="paySubstract">在线支付立减优惠</text>
					</text>
					<text>-￥16</text>
				</view>
				<view class="onlinePayDiscounts">
					<text>
						<text class="circle">红</text>
						<text class="paySubstract">红包抵扣</text>
					</text>
					<text>-￥8</text>
				</view>
			</view>

			<view class="realPay">
				实付 ￥56
			</view>

		</view>
		<!-- 菜的信息和费用end -->

		<!-- 订单信息start -->
		<view class="orderInfo">
			<uni-list-item class="listItem" v-for="item in orderInf" :title="item" :show-arrow="false">
			</uni-list-item>
		</view>
		<!-- 订单信息end -->

	</view>
</template>

<script>
	import {
		uniList,
		uniListItem
	} from "@dcloudio/uni-ui";

	var list = ['土豆', '有机花菜', '青笋', '中型辣锅底', '香菇', '娃娃菜'];
	var orderInf = ["订单信息", '订单编号：123456789', '支付方式：在线支付', '下单时间：2019-07-16 10:29', '订单备注：多放点辣条']
	export default {
		data() {
			return {
				list: list,
				orderInf: orderInf
			};
		},
		components: {
			uniList,
			uniListItem,
		}
	}
</script>

<style lang="less">
	@import url("order-detail");
</style>
